<template>
    <div class="s_box">
      <div class="h_search">
        <img @click="bac()" src="../../../assets/img/bwrite.png" alt="">
        <div class="s_center">
          <img @click="searH()" src="../../../assets/img/search.png" alt="">
          <input type="text" placeholder="大集舞会活动">
          <img src="../../../assets/img/delete.png" alt="">
        </div>
        <span @click="searD()">搜索</span>
      </div>
      <router-view></router-view>
    </div>
</template>

<script>
    export default {
      name: "Search",
      data(){
        return {

        }
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      },
      methods:{
        bac(){
          this.$router.push('/');
        },
        searD(){
          this.$router.push('/synthesize/0')
        },
        searH(){
          this.$router.push('/searchhistory')
        }
      }
    }
</script>

<style scoped>
  .s_box{
    padding-top: 100px;
  }
.h_search{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
  background: #884ca4;
  z-index: 999;
}
.h_search>img{
  height: 30px;
  align-self: center;
}
.h_search .s_center{
  display: flex;
  justify-content: space-between;
  width: 440px;
  height: 36px;
  padding: 12px 30px;
  border-radius: 15px;
  background: #fff;
}
.h_search .s_center img:nth-child(1){
  width: 36px;
}
.h_search .s_center input{
  width: 70%;
  font-size: 28px;
  color: #ccc;
  caret-color:#884ca4;
}
.h_search .s_center img:nth-child(3){
  width: 26px;
  height: 26px;
  align-self: center;
}
.h_search>span{
  font-size: 32px;
  color: #fff;
  align-self: center;
}

</style>
